<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style>
* {
	margin: 0 auto;
	padding: 0;
}

input::-moz-placeholder {
	color: #A9A9A9;
}

#full {
	width: 900px;
}

#full p {
	margin-top: 20px;
	margin-bottom: 20px;
}

input {
	line-height: 40px;
	width: 300px;
	padding-left: 40PX;
}

span {
	margin-left: 10px;
	color: #A9A9A9;
	font-size: 14px;
}

#email,#nickName,#pass,#rePass,#vid {
	background-repeat: no-repeat;
	background-position: 10px center;
	border: 1px solid darkgray;
}

form p:nth-of-type(5) {
	vertical-align: middle;
}

form p:nth-of-type(5) input {
	width: 181px;
}

form p:last-of-type input {
	width: auto;
}

form p:last-of-type {
	margin-left: 100px;
}

form p:last-of-type span {
	margin-left: 106px;
}

#vf {
	vertical-align: middle;
	margin-left: 10px;
	border: 1px solid darkgray;
	height: 40px;
}

#btn {
	border: 0 none;
	margin-top: 25px;
	margin-left: 73px;
	cursor: pointer;
	width: 200px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	border-radius: 8px;
	background-color: #55abe8;
	color: white;
	padding: 0;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>
<script type="text/javascript">
	$(function() {
		$("#form").validate({
			rules : {
				email : {
					required : true,
					email : true
				},
				nickName : {
					required : true,
					rangelength : [ 4, 12 ],
					checkNickName : true
				},
				pass : {
					required : true,
					rangelength : [ 6, 16 ],
					checkPass:true
				},
				rePass : {
					required : true,
					equalTo : "#pass"
				},
				vid : {
					required : true,
				},
				agree : {
					required : true,
				}
			},
			messages : {
				email : {
					required : "&otimes;邮箱不能为空",
					email : "&otimes;邮箱格式不正确"
				},
				nickName : {
					required : "&otimes;昵称不能为空",
					rangelength : "&otimes;输入4-12位字符、英文、数字或者中文"
				},
				pass : {
					required : "&otimes;密码不能为空",
					rangelength : "&otimes;输入6-16位字符或数字、字母,区分大小写"
				},
				rePass : {
					required : "&otimes;密码不能为空",
					equalTo : "&otimes;两次密码输入不一致，请重新填写"
				},
				vid : {
					required : "&otimes;验证码不能为空",
				},
				agree : {
					required : "&otimes;请同意服务条款",
				}
			},
			errorPlacement : function(error, element) { //错误信息位置设置方法
				element.parent().children("span").html(error.html());
				element.parent().children("span").css("color", "red");
			},
			success : function(span) {
				span.html("");
			}
		});
		jQuery.validator.addMethod("checkNickName", function(value, element) {
			var returnVal = false;
			var nickName = $("#nickName").val();
			var standard = /^([\u4E00-\u9FA5]|\d|[a-zA-z]){4,12}$/;
			var returnVal = standard.test(nickName);
			return returnVal;
		}, "&otimes;输入4-12位字符、英文、数字或者中文");
		jQuery.validator.addMethod("checkPass", function(value, element) {
			var returnVal = false;
			var pass = $("#pass").val();
			var standard = /^\w{6,16}$/;
			var returnVal = standard.test(pass);
			return returnVal;
		}, "&otimes;输入6-16位字符、英文、数字或者中文");
	});
</script>
</head>

<body>
	<div id="full">
		<form method="get" action="https://www.baidu.com" id="form">
			<p>
				<input type="text" name="email" id="email" placeholder="请输入您的邮箱"
					style="background-image: url(img/login-input5.png);"
					onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的邮箱'" /><span>请输入您的常用邮箱</span>
			</p>
			<p>
				<input type="text" name="nickName" id="nickName" placeholder="请输入昵称"
					style="background-image: url(img/login-input1.png);"
					onfocus="this.placeholder=''" onblur="this.placeholder='请输入昵称'" /><span>4-12位字符、英文、数字或者中文均可</span>
			</p>
			<p>
				<input type="password" name="pass" id="pass" placeholder="请输入密码"
					style="background-image: url(img/login-input2.png);"
					onfocus="this.placeholder=''" onblur="this.placeholder='请输入密码'" /><span>6-16位字符或数字、字母,区分大小写</span>
			</p>
			<p>
				<input type="password" name="rePass" id="rePass"
					placeholder="请再次输入密码"
					style="background-image: url(img/login-input2.png);"
					onfocus="this.placeholder=''" onblur="this.placeholder='请再次输入密码'" /><span></span>
			</p>
			<p>
				<input type="text" name="vid" id="vid" placeholder="请入右侧验证码"
					style="background-image: url(img/login-input3.png);"
					onfocus="this.placeholder=''" onblur="this.placeholder='请输入右侧验证码'" /><img
					src="img/5a3f394349128.png" id="vf"><span>不区分大小写，点击图片可更换</span>
			</p>
			<p>
				<input type="checkbox" name="agree" id="agree">同意<a href="#">用户服务条款</a><span></span>
			</p>
			<input type="submit" value="注册" id="btn" />
		</form>
	</div>
</body>
</html>
